<template>
	<!--first-->
	<section class="course-first">
		<div class="container">
			<div class="row">
				<div class="col-md-5">
					<br /><br /><br /><br />
					<p class="h1">希悦选排课</p>
					<p class="h3">迈好新课改第一步</p>
					<button class="btn btn-default" type="button" v-link="">立即使用</button>
				</div>
				<div class="col-md-7">
					<img src="../assets/img/bg1(1).png" width="715" />
				</div>
			</div>
		</div>
	</section>
	<!--first end-->
	<!--second-->
	<section class="course-second text-center">
		<div class="container">
			<div class="">
				<img src="../assets/img/bullet.svg" alt="" />
			</div>
			<p class="h1">兼容多种选排课方案</p>
			<div class="row">
				<p class="h4 col-md-8 col-md-offset-2">希悦的选排课系统为新课改量身打造，针对七选三、分层制、走班制等场景进行了深度优化，操作简单又功能强大，让学校能够轻松解决选排课难题。</p>
			</div>
			<br /><br />
			<div class="row">
				<div class="col-sm-2 col-sm-offset-3">
					<img src="../assets/img/plan1.png" width="64" />
				</div>
				<div class="col-sm-2">
					<img src="../assets/img/plan2.png" width="64" />
				</div>
				<div class="col-sm-2">
					<img src="../assets/img/plan3.png" width="64" />

				</div>
			</div>
			<div class="row">
				<div class="col-sm-2 col-sm-offset-3">
					<p>行政班 + 选修课</p>
				</div>
				<div class="col-sm-2">
					<p>分层上课</p>
				</div>
				<div class="col-sm-2">
					<p>七选三制度</p>
				</div>
			</div>
			<br />
			<button class="btn btn-default" type="button" v-link="">立即订购</button>
		</div>
	</section>
	<!--second end-->
	<!--three-->
	<section class="course-three text-center">
		<div class="container">
			<div class="">
				<img src="../assets/img/bullet.svg" alt="" />
			</div>
			<p class="h1">85分钟，一切就位</p>
		</div>
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<p class="text-left h4">普通排课</p>
				<br />
				<ul class="clear list-unstyled">
					<li class="fl" style="width: 35%;height: 10px;background-color: #4990ff;"></li>
					<li class="fl" style="width: 25%;height: 10px;background-color: #55ddff;"></li>
					<li class="fl" style="width: 5%;height: 10px;background-color: #ff6ea2;"></li>
					<li class="fl" style="width: 35%;height: 10px;background-color: #ffbe5d;"></li>
				</ul>
			</div>
			<div class="col-md-8 col-md-offset-2">
				<p class="text-left h4">希悦排课</p>
				<br />
				<ul class="clear list-unstyled">
					<li class="fl" style="width: 25%;height: 10px;background-color: #4990ff;"></li>
					<li class="fl" style="width: 15%;height: 10px;background-color: #55ddff;"></li>
					<li class="fl" style="width: 25%;height: 10px;background-color: #ff6ea2;"></li>
					<li class="fl" style="width: 10%;height: 10px;background-color: #ffbe5d;"></li>
				</ul>
			</div>
		</div>
		<br />
		<p class="h3">导入数据 ---- 预置规则 ---- 一键选课 ---- 人工微调</p>
	</section>
	<!--three end-->
	<!--four-->
	<section class="course-four">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="">
						<img src="../assets/img/bullet.svg" alt="" />
					</div>
					<p class="h1">界面友好，轻松上手</p>
					<br />
					<div class="row">
						<div class="col-sm-4">
							<p class="h4" style="color: #4A90E2;"><span class="h1">30</span>分钟</p>
							<p class="h4">录入数据</p>
						</div>
						<div class="col-sm-4">
							<p class="h4" style="color: #4A90E2;"><span class="h1">1</span>分钟</p>
							<p class="h4">计算运行</p>
						</div>
						<div class="col-sm-4">
							<p class="h4" style="color: #4A90E2;"><span class="h1">70</span>%</p>
							<p class="h4">领先同行</p>
						</div>
					</div>
				</div>
				<div class="col-md-6" style="height: 350px;overflow: hidden;">
					<img src="../assets/img/window1(1).png" width="680px" />
				</div>
			</div>
		</div>
	</section>
	<!--four end-->
	<!--five-->
	<section class="course-five text-center">
		<div class="container">
			<div class="">
				<img src="../assets/img/bullet.svg" alt="" />
			</div>
			<p class="h1">兼容多种选排课方案</p>
			<br /><br />
			<div class="row">
				<div class="col-sm-2 col-sm-offset-2">
					<img src="../assets/img/change1.png" width="64" />
				</div>
				<div class="col-sm-2 col-sm-offset-1">
					<img src="../assets/img/change2.png" width="64" />
				</div>
				<div class="col-sm-2 col-sm-offset-1">
					<img src="../assets/img/change3.png" width="64" />

				</div>
			</div>
			<br />
			<div class="row">
				<div class="col-sm-2  col-sm-offset-2">
					<p>优化学校教育资源配置</p>
				</div>
				<div class="col-sm-2 col-sm-offset-1">
					<p>量身定制走班学习方案</p>
				</div>
				<div class="col-sm-2 col-sm-offset-1">
					<p>让老师专注教学</p>
				</div>
			</div>
		</div>
	</section>
	<!--five end-->
	<!--school-->
	<section class="home-school text-center">
		<div class="container">
			<div class="">
				<img src="../assets/img/bullet.svg" alt="" />
			</div>
			<p class="h1">他们正在使用我们的产品</p>
			<ul class="row list-unstyled">
				<li class="col-md-3">
					<img class="school-img" src="../assets/img/school1.png" />
					<p class="h4">北京大学</p>
				</li>
				<li class="col-md-3">
					<img class="school-img" src="../assets/img/school2.png" />
					<p class="h4">浙江师范大学附属中学</p>
				</li>
				<li class="col-md-3">
					<img class="school-img" src="../assets/img/school3.png" />
					<p class="h4">北京八一中学</p>
				</li>
				<li class="col-md-3">
					<img class="school-img" src="../assets/img/school4.png" />
					<p class="h4">北京十一学校与劳动保障学院联合分校</p>
				</li>
			</ul>
		</div>
	</section>
	<!--school end-->
</template>

<style type="text/css">
	.course-first {
		background-image: url("../assets/img/bg3.png");
		padding: 50px 0;
		color: white;
	}
	
	.course-first button {
		margin-top: 30px;
	}
	/**/
	
	.course-second {
		padding: 50px 0;
		background: url("../assets/img/bg2.svg") no-repeat bottom;
	}
	
	.course-second p {
		padding: 20px 0;
	}
	/**/
	
	.course-three {
		padding: 50px 0;
		background-color: #fafafa;
	}
	/**/
	
	.course-four {
		padding-top: 50px;
		border-bottom: 1px solid #C8C7CC;
	}
	/**/
	.course-five{
		padding: 50px 0;
	}
</style>